<template>
    <div class="SiderBar">
        <ul>
            <li @click="reload">
                <h1>
                    <img src="../assets/img/11.png" alt="" />
                    <img class="red" src="../assets/img/1.png" alt="" />
                </h1>
                <p>刷新</p>
            </li>
            <li
                @mouseenter="xiaochengxu = true"
                @mouseleave="xiaochengxu = false"
            >
                <h1>
                    <img src="../assets/img/i_icon_r_sj.png" alt="" />
                    <img
                        class="red"
                        src="../assets/img/i_icon_r_sj_rd.png"
                        alt=""
                    />
                </h1>
                <p>小程序</p>

                <transition enter-active-class="animated slideInRight">
                    <h2 class="xiaochengxu" v-show="xiaochengxu">
                        <img src="../assets/img/erweima.png" alt="" />
                    </h2>
                </transition>
            </li>
            <li @mouseenter="gzh = true" @mouseleave="gzh = false">
                <h1>
                    <img src="../assets/img/33.png" alt="" />
                    <img class="red" src="../assets/img/3.png" alt="" />
                </h1>
                <p>公众号</p>

                <transition enter-active-class="animated slideInRight">
                    <h2 class="xiaochengxu" v-show="gzh">
                        <img src="../assets/gongzhonghao.jpg" alt="" />
                    </h2>
                </transition>
            </li>
            <li @mouseenter="kefu = true" @mouseleave="kefu = false">
                <h1>
                    <img src="../assets/img/33.png" alt="" />
                    <img class="red" src="../assets/img/3.png" alt="" />
                </h1>
                <p>客服</p>

                <transition enter-active-class="animated slideInRight">
                    <h2 class="xiaochengxu" v-show="kefu">
                        <img src="../assets/img/kefuerweima.png" alt="" />
                    </h2>
                </transition>
            </li>

            <li @click="$router.push('/Help/Feedback')">
                <h1>
                    <img src="../assets/img/44.png" alt="" />
                    <img class="red" src="../assets/img/4.png" alt="" />
                </h1>
                <p>反馈</p>
            </li>
            <li @click="goTop" v-show="is_gotop">
                <h1>
                    <img src="../assets/img/55.png" alt="" />
                    <img class="red" src="../assets/img/5.png" alt="" />
                </h1>
                <p>顶部</p>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'SiderBar',
    props: {
        msg: String,
    },
    computed: {
        ...mapState({
            is_gotop: (state) => state.is_gotop,
        }),
    },
    data() {
        return {
            xiaochengxu: false,
            kefu: false,
            gzh: false,
        };
    },
    mounted() {},
    methods: {
        goTop() {
            // 动画
            let timer = setInterval(function () {
                //获取滚动条到顶部的位置
                let osTop =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 44);
                // 判断到顶部的等式：滚动条到顶部的位置 + 当前窗口内容可视区 == 滚动条的总高度
                document.documentElement.scrollTop = document.body.scrollTop =
                    osTop + ispeed;
                //this.isTop = true
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 1);
        },
        reload() {
            document.documentElement.scrollTop = 0;
            location.reload();
        },
    },

    handleScroll() {
        //滚动条滚动时，距离顶部的距离
        this.scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;

        // 判断是否下拉了所需长（高）度，若满足，则返回顶部图标出现
        console.log(this.scrollTop);
        if (this.scrollTop > window.innerWidth) {
            this.is_gotop = true;
        } else {
            this.is_gotop = false;
        }
    },

    destroyed() {},
};
</script>
<style scoped lang="scss">
.SiderBar {
    width: 50px;
    height: 340px;
    position: fixed;
    right: 28px;
    bottom: 50px;
}
li {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;

    .red {
        display: none;
    }

    h1 {
        text-align: center;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-bottom: 2px;
    }
    p {
        text-align: center;
    }
}
li:hover {
    background: #fdf2f4;
    h1 {
        img {
            display: none;
        }
        .red {
            display: inline-block;
        }
    }
    p {
        color: #e60012;
    }
}

.xiaochengxu {
    position: absolute;
    right: 60px;
    top: 0;

    img {
        width: 80px;
    }
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
</style>
